<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同时上传多个文件</title>
    <style>
        .model-table {
            border: 0;
        }
    </style>
</head>

<body>
    <main>
        <table class="model-table">
            <tbody id="model-table__tbody">
                <tr>
                    <td><input type="file" name="file_1"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <button id="btn_new">新增</button>
                        <button id="btn_clone">克隆</button>
                        <button>提交</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </main>
</body>

</html>
<script>
    //克隆，使用Core DOM操作表格
    document.getElementById("btn_clone").addEventListener('click', event => {
        let tbody = document.getElementById("model-table__tbody");
        let currentTr = tbody.lastElementChild.cloneNode(true);
        //修正文本框中的name值
        let input = currentTr.firstElementChild.firstElementChild;
        let index = input.name.indexOf("_");
        let newName = input.name.substring(0, +index + 1)
            + (Number.parseInt(input.name.substring(index + 1, input.name.length)) + 1);
        //添加删除按钮
        let buttons = currentTr.querySelectorAll("button");
        if (buttons.length != 0) {
            buttons[0].parentNode.removeChild(buttons[0]);
        }
        let button = document.createElement("button");
            button.innerHTML = "删除";
            //通过createElement()函数创建的节点，也可以加入监听器
            button.addEventListener('click', event => {
                let tr = event.target.parentNode.parentNode;    //根据DOM结构，找到事件源节点的父元素的父元素。
                tr.parentNode.removeChild(tr);      //标准的删除操作。
            }, false);
            currentTr.firstElementChild.appendChild(button);
        tbody.appendChild(currentTr);
    }, false);
    //新增，使用HTML DOM操作表格
    document.getElementById("btn_new").addEventListener("click", event => {
        let tbody = document.getElementById("model-table__tbody");
        let oldName = tbody.lastElementChild.firstElementChild.firstElementChild.name;  //获取最后一个input中的name值
        let tr =tbody.insertRow(tbody.rows.length); //在tbody的所有行的最后加入一行，并把该行赋值给tr。
        let td = tr.insertCell(0);  //在tr中添加一列，并把该列赋值给td
        let input = document.createElement("input");
        input.type = "file";
        let arrays = oldName.split("_");    //把file与1分开
        let newName = arrays[0] + "_" + (Number(arrays[1]) + 1);  //根据最后一个name的值，重新组合新值
        input.name = newName;
        td.appendChild(input);
        let button = document.createElement("button");
        button.innerHTML = "删除";
        //通过createElement()函数创建的节点，也可以加入监听器
        button.addEventListener('click', event => {
            let tr = event.target.parentNode.parentNode;
            tbody.deleteRow(tr.rowIndex);   //HTML DOM中的删除行操作，tr.rowIndex是要删除的行的下标
        }, false);
        td.appendChild(button);
        tbody.appendChild(tr);
    }, false);
</script>